<template>
    <div class="dm">
        <div class="dm-filter">
            <el-form :inline="true" class="dm-form" :model="form">
                <el-form-item label="考勤班级id：">
                    <el-input placeholder="七位数id" v-model="form.classesId" />
                </el-form-item>
                <el-form-item label="考勤日期：" style="margin-left: 10px;">
                    <el-input placeholder="xxxx-xx-xx" v-model="form.time" />
                </el-form-item>
                <el-form-item style="margin-left: 20px;">
                    <el-button type="primary" @click="chaxun">查询</el-button>
                </el-form-item>
                <el-form-item style="margin-left: 20px;">
                    <el-button type="primary" @click="onSubmit">开始考勤</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="dm-list">
            <div class="dm-list-table">
                <el-table :data="student" border style="width: 100%; max-height: 350px; font-size: 10px;">
                    <el-table-column label="序号">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="classId" label="年级班级">
                        <template #default="scope">
                            {{ nian.gradeId[scope.row.student.classes.gradeId] +
                                nian.classId[scope.row.student.classes.classId] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="学生姓名">
                        <template #default="scope">
                            {{ scope.row.student.name }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="sex" label="性别">
                        <template #default="scope">
                            {{ scope.row.student.sex == 1 ? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="学籍号">
                        <template #default="scope">
                            {{ scope.row.sId }}
                        </template>
                    </el-table-column>
                    <el-table-column label="今日考勤状态">
                        <template #default="scope">
                            <span :class="scope.row.state == 0 ? 'active' : 'actives'">{{ nian.state[scope.row.state]
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="电话号码">
                        <template #default="scope">
                            {{ scope.row.student.phone }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script  setup lang="ts">
import server from '@/api/index';
import { reactive, toRefs, onMounted } from 'vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
var router = useRouter()
let student = ref([])
let form = ref({ time: '', classesId: '' })

const nian: any = ref(
    {
        gradeId: {
            3: '三年级',
            1: '一年级',
            2: '二年级'
        },
        classId: {
            1: '一班',
            2: '二班',
            3: '三班',
        },
        state: {
            0: '正常',
            1: '迟到',
            2: '缺勤'
        }
    })
onMounted(async () => {
    var rew = await server.home.getAttendanceByClassesTimeByPage({ time: '2023-04-07', classesId: '1000301' })
    student.value = rew.data.data.date
    // console.log(rew.data.data.date);
})
var chaxun = async () => {
    var rew = await server.home.getAttendanceByClassesTimeByPage(form.value)
    student.value = rew.data.data.date
}
var onSubmit = () => {
    router.push('/kaoqin')
}
</script>

<style  scoped lang="scss">
.dm {
    width: 100%;
    background: #fff;

    .dm-form {
        height: 115px;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 20px 20px 0;
        position: relative;

        .el-form-item {
            margin-right: 0;
        }
    }

    .dm-list {
        height: 430px;
        padding: 0 20px 0px;

        .dm-list-fenye {
            margin-top: 15px;
            display: flex;
            justify-content: end;
        }
    }

    .active {
        color: green;
    }

    .actives {
        color: red;
    }
}
</style>